<!-- 首页 -->
<template>
	<view class="container">
		<view>
			<view class="p-tb16">
				<view class="m-b10">
					<text class="f-s14 text-gray">国内热门城市</text>
				</view>
				<view class="grid">
					<view class="grid-item" v-for="item in hotCity" :key="item"
						@click="handleSelectChange(!checkSelection(item),{name:item})"
						:class="{'grid-item-active':checkSelection(item)}">
						<text>{{item}}</text>
					</view>
				</view>
			</view>
			<view class="m-b10 line"></view>
			<view class="m-b10 index-container overflow-hidden relative" style="height: 500rpx;">
				<u-index-list activeColor="#FE3F59" customNavHeight="250" :index-list="indexList">
					<template v-for="(item, index) in cityList">
						<u-index-item>
							<u-index-anchor :text="item.letter" bgColor="#fff" class="m-b16"></u-index-anchor>
							<u-checkbox-group placement="column">
								<u-checkbox activeColor="#FE3F59" size="32rpx" v-for="cityItem of item.data"
									:key="cityItem.id" :label="cityItem.name" :checked="checkSelection(cityItem.name)"
									:name="cityItem.name" class="m-b10"
									@change="handleSelectChange($event,cityItem)"></u-checkbox>
							</u-checkbox-group>
						</u-index-item>
					</template>
				</u-index-list>
				<view class="full-width full-height flex align-center justify-center absolute" v-show="!cityList.length">
					<u-loading-icon mode="circle"></u-loading-icon>
				</view>
			</view>
		</view>
		<view class="" style="margin-bottom: 26rpx;">
			<view class="f-s12 text-gray">
				<text>已选城市</text>
			</view>
			<view class="m-t4 flex" style="overflow-x: auto;">
				<view class="tag shrink-0" v-for="(item,index) in selection" :key="index">
					<text>{{item}}</text>
					<image src="/static/images/login/close.png" mode="" @click="handleTagClose(index)"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cityData from "@/common/city_data.js"
	import {
		areaList
	} from "@/api/mine/auth.js"
	export default {
		name: "",
		props: ["value"],
		data() {
			return {
				hotCity: [
					"北京",
					"上海",
					"广州",
					"深圳",
					"成都",
					"杭州",
					"重庆",
					"武汉",
					"西安",
					"苏州",
					"南京",
					"长沙"
				],
				cityList: [],
				indexList: [],
				selection: [],
				letters: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''),
			}
		},
		created() {
			// this.indexList = cityData.map(item => item.letter)
			setTimeout(()=>{
				for (let item of cityData) {
					this.indexList.push(item.letter)
					this.cityList.push({ letter:item.letter,data:item.data})
				}
			},100)
			
			// for (let letter of this.letters) {
			// 	this.getAreaList(letter)
			// }
		},
		watch: {
			value: {
				immediate: true,
				handler(val) {
					if (val) {
						this.selection = val.split("/")
					}
				}
			}
		},
		methods: {
			getAreaList(letter) {
				areaList({
					level: 2,
					first: letter
				}).then(res => {
					let cityData = res.data?.list?.map(item => {
						return {
							name: item.name,
							id: item.id
						}
					}) ?? []
					if (cityData.length) {
						this.indexList.push(letter)
						this.cityList.push({
							letter,
							data: cityData
						})
					}

				})
			},
			handleSelectChange(check, item) {
				if (check) {
					if (this.selection.length < 4) {
						this.selection.unshift(item.name)
					} else {
						// 替换第一个
						this.selection.splice(0, 1, item.name)
					}
				} else {
					let delIndex = this.selection.indexOf(item.name)
					this.selection.splice(delIndex, 1)
				}
				this.$emit('input', this.selection.join('/'))
			},
			handleTagClose(index) {
				this.selection.splice(index, 1)
				this.$emit('input', this.selection.join('/'))
			},
			checkSelection(val) {
				return this.selection.indexOf(val) !== -1
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "@/common/css/var.scss";

	.container {
		.grid {
			display: grid;
			grid-template-columns: repeat(4, 152rpx);
			grid-template-rows: repeat(3, 64rpx);
			grid-row-gap: 26rpx;
			grid-column-gap: 24rpx;

			// grid-template-columns: repeat(12,1fr);
			.grid-item {
				background-color: #F0F1F2;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 400;
				font-size: 24rpx;
			}

			.grid-item-active {
				background-color: #FE3F59;
				color: #fff;
			}
		}

		.index-container {
			// @include fixed-bottom;
		}

		::v-deep .u-index-anchor {
			top: -1px;
		}

		.tag {
			padding: 8rpx 8rpx 8rpx 12rpx;
			background-color: #EBECED;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			line-height: 24rpx;
			margin-right: 10rpx;

			&:last-child {
				margin-right: 0;
			}

			image {
				width: 28rpx;
				height: 28rpx;
				margin-left: 12rpx;
			}
		}
	}

	::v-deep .u-index-list__letter {
		z-index: 99999;
		// top: auto !important;
		// bottom: calc(constant(safe-area-inset-bottom) + 120rpx) !important;
		// bottom: calc(env(safe-area-inset-bottom) + 120rpx) !important;
	}
</style>